<template>
    <div class="box">
        <div class="left">
            <div class="shadow">
                <div class="tool">
                    <span class="el-icon-rank"></span>
                    <span class="el-icon-delete-solid"></span>
                </div>
                <div class="number"><span class="red" v-if="mustchecked">*</span>1</div>
                <div class="content">
                    <p v-html="title"></p>
                    <el-input
                      resize="none"
                      :class="{'line': line_style}"
                      :style="{width: width + 'px'}"
                      type="textarea"
                      :rows="rows"
                      placeholder="请输入内容"
                      v-model="textarea">
                    </el-input>
                </div>
                <div class="clear"></div>
                <div class="foot_tool">
                    <quill-editor
                        v-model="title"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                    </quill-editor>
                    <div class="mustchecked"><el-checkbox v-model="mustchecked">必答</el-checkbox></div>
                    <div class="mustchecked">
                      <el-checkbox v-model="showrange">限制范围</el-checkbox>
                      <div class="range"  v-if="showrange">
                        <div class="item">最小字数：</div>
                        <div class="item">
                          <el-input v-model="min" size="small" style="width: 100px" type="number"></el-input>
                        </div>
                        <div class="item" style="margin-left: 5px">最大字数：</div>
                        <div class="item">
                          <el-input v-model="max" size="small" style="width: 100px" type="number"></el-input>
                        </div>
                      </div>
                      <div class="mustchecked">
                        <el-select v-model="rows" placeholder="设置高度" size="small" style="width: 100px;margin-right:5px">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                        <el-input v-if="rows === 'edit'" v-model="editrows" size="small" style="width: 100px" type="number" @blur="blurrows"></el-input>
                        <el-select v-model="width" placeholder="设置宽度" size="small" style="width: 100px;margin-left:5px">
                          <el-option
                            v-for="item in widths"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                        <el-checkbox v-model="line_style" style="margin-left:5px">下划线样式</el-checkbox>
                      </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'singlefill',
  data() {
    return {
      title: '请输入标题',
      mustchecked: true,
      showrange: false,
      textarea: '',
      rows: 1,
      min: '',
      max: '',
      options: [
        {
          value: 1,
          label: '高度1行',
        },
        {
          value: 2,
          label: '高度2行',
        },
        {
          value: 3,
          label: '高度3行',
        },
        {
          value: 4,
          label: '高度4行',
        },
        {
          value: 5,
          label: '高度5行',
        },
        {
          value: 10,
          label: '高度10行',
        },
        // {
        //   value: 'edit',
        //   label: '自定义高度',
        // },
      ],
      width: 500,
      widths: [
        {
          value: 100,
          label: '宽度100',
        },
        {
          value: 200,
          label: '宽度200',
        },
        {
          value: 300,
          label: '宽度300',
        },
        {
          value: 400,
          label: '宽度400',
        },
        {
          value: 500,
          label: '宽度500',
        },
      ],
      editrows: '',
      line_style: false,
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  methods: {
  },
};
</script>

<style scoped lang="scss">
.box{
    width: 100%;
    height: 100vh;
    background: #eee;
    .left{
        padding-top: 20px;
        width: 100%;
        height: 100%;
        .shadow{
            position: relative;
            margin: 0 auto;
            width: 1000px;
            .tool{
                position: absolute;
                top: 15px;
                right: 10px;
                color: #666;
                span{
                    font-size: 20px;
                    display: inline-block;
                    margin: 0 10px;
                }
            }
            .number{
                float: left;
                width: 12%;
                text-align: center;
                padding-top: 12px;
            }
            .content{
                float: left;
                width: 70%;
                p{
                    padding: 10px 0;
                }
                .line /deep/textarea{
                  border: 0;
                  border-bottom: 1px solid #DCDFE6;
                }
            }
            .foot_tool{
                margin-top: 15px;
                border-top: 1px solid #dfe4e6;
                background: #FAFAFA;
                padding: 10px 0;
                .mustchecked{
                    padding: 10px 5px;
                }
                .range{
                  display: inline-block;
                  margin-left: 10px;
                  .item{
                    display: inline-block;
                  }
                }
            }
            &:after{
                clear:both;
                display: block;
                content: '';
            }
        }
    }
    &:after{
        clear: both;
        content: '';
        display: block;
    }
}
</style>
